//定义全局变量
var ROWS;//行数
var COLS;//列数
var CONTEXT;//画布上下文对象
var BLOCK_SIZE;//格子大小
var snakes = [];//保存蛇坐标
var snakeCount;//蛇身数量
var foodX, foodY;//食物的坐标
var interval;//计时
var moveTo;//蛇移动的方向
var isStop;//是否暂停
var score;//分数
var speed;//蛇运行速度
window.onload = function(){//方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法
    //游戏初始化
    init();
    start();
}
function reLoad(){
    //重新加载
    window.location.reload()
}
//开始游戏
function start(){
    interval = setInterval(move, speed);
    document.onkeydown = function(event){
        var event = event || window.event;
        keydown(event.keyCode);
    }
}
//交互响应函数
function keydown(keyCode){
    switch(keyCode){
        case 37://左边
            if(moveTo % 2) moveTo = 0;
            break;
        case 38://上边
            if(!(moveTo %2)) moveTo = 1;
            break;
        case 39://右边
            if(moveTo % 2) moveTo = 2;
            break;
        case 40://下边
            if(!(moveTo % 2)) moveTo = 3;
            break;
        case 32://开始/暂停
            if(isStop){
                interval = setInterval(move, speed);
                isStop = false;
                document.getElementById("model1").style.display='none';
            }
            else{
                clearInterval(interval);
                isStop = true;
                document.getElementById("model1").style.display='block';
            }
            break;
        case 107://加速
            if(speed > 50){
                speed -= 50;
                clearInterval(interval);
                interval = setInterval(move, speed);
            }
            console.log(speed)
            break;
        case 109://减速
            if(speed < 500){
                speed += 50;
                clearInterval(interval);
                interval = setInterval(move, speed);
            }
            console.log(speed);
            break;
    }
}
//制造食物
function addFood(){
    foodX = Math.floor(Math.random() * (ROWS - 1)) * BLOCK_SIZE;
    foodY = Math.floor(Math.random() * (COLS - 1)) * BLOCK_SIZE;
    drawFood();
}
//死亡判断
function isDie(){
    if(snakes[snakeCount - 1].x == -20 || snakes[snakeCount - 1].x == BLOCK_SIZE * ROWS ||
    snakes[snakeCount - 1].y == -20 || snakes[snakeCount - 1].y == BLOCK_SIZE * COLS){
        clearInterval(interval);
        document.getElementById("model2").style.display = 'block';
    }
    for(var i = 0; i < snakeCount - 1; i++){
        if(snakes[snakeCount - 1].x == snakes[i].x && snakes[snakeCount - 1].y == snakes[i].y){
            clearInterval(interval);
            document.getElementById("model2").style.display = 'block';
        }
    }
}
//吃到食物判断
function isEat(){
    if(snakes[snakeCount - 1].x == foodX && snakes[snakeCount - 1].y == foodY){
        document.getElementById("score").innerHTML = ++score;
        addFood();
        addSnake();
    }
}
//添加蛇身
function addSnake(){
    snakeCount++;
    snakes.unshift({
        x: BLOCK_SIZE * ROWS,
        y: BLOCK_SIZE * COLS
    });
}
//移动函数
function move(){
    switch(moveTo){
        case 0:
            snakes.push({
                x: snakes[snakeCount - 1].x - BLOCK_SIZE,
                y: snakes[snakeCount - 1].y
            });
            break;
        case 1:
            snakes.push({
                x: snakes[snakeCount - 1].x,
                y: snakes[snakeCount - 1].y - BLOCK_SIZE
            });
            break;
        case 2:
            snakes.push({
                x: snakes[snakeCount - 1].x + BLOCK_SIZE,
                y: snakes[snakeCount - 1].y
            });
            break;
        case 3:
            snakes.push({
                x: snakes[snakeCount - 1].x,
                y: snakes[snakeCount - 1].y + BLOCK_SIZE
            });
            break;
        default:
            ;
    }
    snakes.shift();
    drawMap();
    drawFood();
    drawSnake();
    isEat();
    isDie();
}
//游戏初始化
function init(){
    ROWS = 35;
    COLS = 25;
    BLOCK_SIZE = 20;
    snakeCount = 3;
    moveTo = 2;
    score = 0;
    document.getElementById("score").innerHTML = score;
    CONTEXT = document.getElementById('canvas').getContext('2d');
    for(var i = 0; i < snakeCount; i++){
        snakes[i] = {
            x: i * BLOCK_SIZE,
            y: 0
        };
    }
    isStop = false;
    speed = 500;
    addFood();
    drawMap();
    drawSnake();
    drawFood();
}
//画出蛇运动的场地
function drawMap(){
    CONTEXT.clearRect(0, 0, BLOCK_SIZE * ROWS, BLOCK_SIZE * COLS);
    //画横线
    for(var i = 0; i < COLS; i++){
        CONTEXT.beginPath();
        CONTEXT.moveTo(0, i * BLOCK_SIZE);
        CONTEXT.lineTo(BLOCK_SIZE * ROWS, i * BLOCK_SIZE);
        CONTEXT.strokeStyle = "gray";
        CONTEXT.lineWidth = 1;
        CONTEXT.stroke();
    }
    for(var i = 0; i < ROWS; i++){
        CONTEXT.beginPath();
        CONTEXT.moveTo(i * BLOCK_SIZE, 0);
        CONTEXT.lineTo(i * BLOCK_SIZE, BLOCK_SIZE * COLS);
        CONTEXT.strokeStyle = "gray";
        CONTEXT.lineWidth = 1;
        CONTEXT.stroke();
    }
}
//画蛇
function drawSnake(){
    for(var i = 0; i < snakes.length; i++){
        CONTEXT.beginPath();
        CONTEXT.fillStyle = "red";
        CONTEXT.fillRect(snakes[i].x, snakes[i].y, BLOCK_SIZE, BLOCK_SIZE);
        CONTEXT.moveTo(snakes[i].x, snakes[i].y);
        CONTEXT.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y);
        CONTEXT.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y + BLOCK_SIZE);
        CONTEXT.lineTo(snakes[i].x, snakes[i].y + BLOCK_SIZE);
        CONTEXT.closePath();
        CONTEXT.strokeStyle = "gray";
        CONTEXT.stroke();
    }
}
//画食物
function drawFood(){
    CONTEXT.beginPath();
    CONTEXT.fillStyle = "yellow";
    CONTEXT.fillRect(foodX, foodY, BLOCK_SIZE, BLOCK_SIZE);
    CONTEXT.moveTo(foodX, foodY);
    CONTEXT.lineTo(foodX + BLOCK_SIZE, foodY);
    CONTEXT.lineTo(foodX + BLOCK_SIZE, foodY + BLOCK_SIZE);
    CONTEXT.lineTo(foodX, foodY + BLOCK_SIZE);
    CONTEXT.closePath();
    CONTEXT.strokeStyle = "red";
    CONTEXT.stroke();
}